<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <btns></btns>
       <contents></contents>
       <!-- <complete></complete> -->
       

        <!-- 用户输入内容 -->
        <!-- <input type="text" v-model="ipt" @keyup.enter="handlerIpt"> -->
        <!-- 渲染用户内容 -->
        <!-- 渲染未完成 -->
        <!-- 渲染已完成 -->
        <!-- <h2>未完成</h2>
        <div v-for="item in unfinishlist">

            <input type="checkbox" @click.prevent="handlerCheck(item)">
            {{item.name}}
            {{item.contents}}
            <button @click="del(item)">删除</button>
        </div> -->

        <!-- <h2>已完成</h2>
        <div v-for="item in finishlist">

            <input type="checkbox" checked @click.prevent="handlerCheck(item)">
            {{item.name}}
            {{item.contents}}
            <button @click="del(item)">删除</button> -->
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let bus = new Vue()
        let btns = {
            template: `
                        <div>
                            <input type="text" v-model="ipt" @keyup.enter="handlerIpt">
                        </div>
                     `,
            data() {
                return {
                    ipt: ""
                }

            },
            methods: {
                handlerIpt() {
                    bus.$emit("msg", this.ipt)
                    this.ipt = ""
                },
            }

        }



        let contents  = {
            //l/props用来声明变量<contents :ids="index"></contents>在传递数据的时ll props中设置的名称，一定要和等号左边的名称相同
            //已经变成了当前组件的一个可以使用的变量
            template: `
                  <div>
                    <h2>未完成</h2>
              <div v-for="item in unfinishlist">
               <input type="checkbox" @click.prevent="handlerCheck(item)">
                        {{item.name}}
                        {{item.contents}}
               <button @click="del(item)">删除</button>
               </div>
               <h2>已完成</h2>
           <div v-for="item in finishlist">
            <input type="checkbox" checked @click.prevent="handlerCheck(item)">
            {{item.name}}
            {{item.contents}}
            <button @click="del(item)">删除</button>
               
               </div>
               
            
                       
                       
                     `,
            data() {
                return {
                    list: [{
                            id: 0,
                            name: "",
                            contents: '吃饭',
                            isChecked: false
                        },

                        {
                            id: 1,
                            name: "",
                            contents: '睡觉',
                            isChecked: true
                        },

                    ],

                }
            },

            created() {
                //   声明周期函数，自动执行的函数
                //调用组件的时候，生命周期函数会自动执行
                //created其中的一个函数
                // console.log(123);
                bus.$on('msg', (ipt) => {
                    //    console.log(ipt);
                    this.list.push({
                        id: this.list.length,
                        contents: ipt,
                        isChecked: false
                    })
                    // this.ipt = ""
                })
            },
            methods: {
                handlerCheck(item) {
                    this.list[item.id].isChecked = !item.isChecked
                },
                del(item) {
                    this.list.splice(item.id, 1);
                    this.list.forEach((ele, index) => {
                        ele.id = index;
                    })
                }
            },
            computed: {
                unfinishlist() {
                    return this.list.filter(ele => ele.isChecked === false)
                },
                finishlist() {
                    return this.list.filter(ele => ele.isChecked === true)
                }
            }

        }
        // let complete  = {
           
        //     template: `
              
        //              `,
        //     data() {
        //         return {
        //             list: [{
        //                     id: 0,
        //                     name: "",
        //                     contents: '吃饭',
        //                     isChecked: false
        //                 },

        //                 {
        //                     id: 1,
        //                     name: "",
        //                     contents: '睡觉',
        //                     isChecked: true
        //                 },

        //             ],

        //         }
        //     },

        //     created() {
        //         //   声明周期函数，自动执行的函数
        //         //调用组件的时候，生命周期函数会自动执行
        //         //created其中的一个函数
        //         // console.log(123);
        //         bus.$on('msg', (ipt) => {
        //             //    console.log(ipt);
        //             this.list.push({
        //                 id: this.list.length,
        //                 contents: ipt,
        //                 isChecked: false
        //             })
        //             // this.ipt = ""
        //         })
        //     },
        //     methods: {
        //         handlerCheck(item) {
        //             this.list[item.id].isChecked = !item.isChecked
        //         },
        //         del(item) {
        //             this.list.splice(item.id, 1);
        //             this.list.forEach((ele, index) => {
        //                 ele.id = index;
        //             })
        //         }
        //     },
        //     computed: {
        //         // unfinishlist() {
        //         //     return this.list.filter(ele => ele.isChecked === false)
        //         // },
        //         finishlist() {
        //             return this.list.filter(ele => ele.isChecked === true)
        //         }
        //     }

        // }
    











        let vm = new Vue({
            el: "#app",
            components: {
                btns,
                contents,
                // complete
            },
            data: {
                ipt: "",
                list: [{
                        id: 0,
                        name: "",
                        contents: '吃饭',
                        isChecked: false
                    },

                    {
                        id: 1,
                        name: "",
                        contents: '睡觉',
                        isChecked: true
                    },

                ],



            },
            methods: {
                handlerIpt() {
                    this.list.push({
                        id: this.list.length,
                        contents: this.ipt,
                        isChecked: false
                    })
                    this.ipt = ""
                },
                handlerCheck(item) {
                    this.list[item.id].isChecked = !item.isChecked
                },
                del(item) {
                    this.list.splice(item.id, 1);
                    this.list.forEach((ele, index) => {
                        ele.id = index;
                    })
                }

            },

            
        })
    </script>
</body>

</html>